<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>确认订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../css/mui.css">
    <link rel="stylesheet" href="../../css/mycss/checkOrder.css">

    <style>
        .amost-lists{
            background-color: white;
            margin-top: 5px;
        }
        .amost-img{
            float: left;
            margin-left:1%;
        }
        .amost-img >img{
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body style="background-color: rgb(236,239,243);max-width: 414px;margin: auto;">

<header id="header" class="mui-bar mui-bar-nav" style="max-width: 414px;margin: auto;background-color:rgb(0,145,219);">
    <a style="color: white; " class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <!--<div  class="l"></div>-->
    <div class="mui-title" style="color: white;text-align: left;margin-left: 20px">确认订单</div>
</header>

<div class="mui-content">
    <!-- START -->
    <div class="mui-row" style="width: 100%;background-color: white;padding: 10px 20px 10px 20px;overflow: hidden;margin-top:10px;" onclick="javascript:goUrl('address.html')" >
        <div class="mui-col-xs-11 mui-row" >
            <div class="mui-col-xs-11 mui-row" style="font-size: 14px;line-height: 30px">
                <div class="mui-col-xs-5"  style="color: black;">
                    <span style="font-size: 16px;">收货地址：</span>
                </div>
                <div class="mui-col-xs-2"  >
                    <span>小普</span>
                </div>
                <div class="mui-col-xs-2"  >
                    <span>1333333333</span>
                </div>
                <div class="mui-col-xs-3"  >

                </div>

                <div class="mui-col-xs-12"  style="color: #C0C0C0 ; border-top:1px solid   #F8F8FF;font-size: 16px;">
                    <span>广东省 东莞市 黄江镇 社贝村明珠二路12号小普未来科技</span>
                </div>
            </div>
        </div>
        <div class="mui-col-xs-1"  style="color: #C0C0C0">
            <a onclick="javascript:goUrl('address.html')" class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #C0C0C0;line-height: 60px"></a>
        </div>
    </div>
    <!-- END -->

    <!-- START -->
    <div class="order-checked-info" style="width: 100%;background-color: white;padding: 5px 20px 5px 20px;overflow: hidden;margin-top:10px;">
        <div class=" mui-row">
            <!--<div class="checked-order-img  mui-col-xs-4" style="float:left;">-->
                <!--<img style="width: 100px;height:100px" src="../../images/750大图.png">-->
            <!--</div>-->
            <!--<div class="order-article  mui-col-xs-8"  style="margin-top:10px;font-size: 12px;float:left;">-->
                <!--<div class="order-article-top" style="overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">-->
                    <!--能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？-->
                <!--</div>-->
                <!--<div class="order-article-center  mui-row">-->
                    <!--<div class="buying-info-icon" style="display: inline-block;width:80px;height: 16px;">-->
                        <!--<img style="width:100%;height: 100%;"  src="../../images/图层-1@2x_0.png">-->
                    <!--</div>-->
                    <!--<div class="buying-info-icon" style="display: inline-block;width:15px;height: 15px;">-->
                        <!--<img style="width:200%;height: 120%;"  src="../../images/图层-2@2x_1.png">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="order-article-bottom">-->
						<!--<span style="color: black">-->
							<!--&lt;!&ndash; <span style="font-weight: bold;">¥</span> &ndash;&gt;-->
							<!--<span style="font-size: 14px;color: rgb(245,0,89)">¥1.00&nbsp</span>-->
							<!--<span style="font-size: 12px;text-decoration:line-through">¥12.05-->
							<!--</span>-->
						<!--</span>-->
                    <!--<div class="numbox">-->
                        <!--X1-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div style="overflow: auto">
                <div class="checked-img-List" style=" overflow-y: hidden;">
                        <div class="amost-lists" >
                            <div class="amost-img">
                                <img src="../../images/750大图.png">
                            </div>
                            <div class="amost-img" >
                                <img src="../../images/750大图.png">
                            </div>
                            <div class="amost-img" >
                                <img src="../../images/750大图.png">
                            </div>
                            <div class="amost-img" >
                                <img src="../../images/750大图.png">
                            </div>
                            <div class="amost-img" >
                                <img src="../../images/750大图.png">
                            </div>
                            <div class="amost-img" >
                                <img src="../../images/750大图.png">
                            </div>
                        </div>
                    </div>
            </div>
            <a class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #C0C0C0;"><span style="font-size: 14px;">共7件</span></a>
            <script>
                window.onload=function() {
                    var width = document.body.clientWidth;
                    var height = width / 3;
                    document.getElementsByClassName('checked-img-List')[0].style.width = width * 2 + 'px';
                    document.getElementsByClassName('checked-img-List')[0].style.height = height + 'px';

                    var amostImgs = document.getElementsByClassName('amost-img');
                    var divNum = amostImgs.length;
                    for (var i = 0; i < divNum; i++) {
                        amostImgs[i].style.width = width / 3 - 20 + 'px';
                        amostImgs[i].style.height = height + 'px';
                    }
                }
            </script>
        </div>

        <div class="mui-row"  style="border-top:1px solid   #F8F8FF;padding: 10px 5px 10px 5px">
            <div class="mui-col-xs-8" style="float:left;">
                <span>商品金额</span>
            </div>
            <div class="mui-col-xs-4"  style="float:left;text-align: right;">
                <span style="font-size: 14px;color: rgb(245,0,89)">¥1.00&nbsp</span>
            </div>
        </div>

        <div class="mui-row"  style="border-top:1px solid   #F8F8FF;padding: 10px 5px 10px 5px">
            <div class="mui-col-xs-8" style="float:left;">
                <span>运费&nbsp<span  style="font-size: 12px;">（总重量:0.31kg）</span></span>
            </div>
            <div class="mui-col-xs-4"  style="float:left;text-align: right;">
                <span style="font-size: 14px;color: rgb(245,0,89)">¥1.00&nbsp</span>
            </div>
        </div>
    </div>
    <!-- END -->

    <!-- START -->
    <div class="order-checked-info" style="width: 100%;background-color: white;padding: 5px 20px 5px 20px;overflow: hidden;margin-top:10px;">
        <div class="mui-row"  style="border-top:1px solid   #F8F8FF;padding: 10px 5px 10px 5px">
            <div class="mui-col-xs-8" style="float:left;">
                <span>发票</span>
            </div>
            <div class="mui-col-xs-4"  style="float:left;text-align: right;">
                <span style="color: #C0C0C0">不开发票</span><a class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #C0C0C0;"></a>
            </div>
        </div>
    </div>
    <!--END-->

    <!-- START -->
    <div class="order-checked-info" style="width: 100%;background-color: white;padding: 5px 20px 5px 20px;overflow: hidden;margin-top:10px;">
        <div class="mui-row"  style="border-top:1px solid   #F8F8FF;padding: 10px 5px 10px 5px">
            <div class="mui-input-row">
                <label style="padding: 11px 0px;color: #C0C0C0">选填:</label>
                <input type="text" class="mui-input-clear" placeholder="给商家的留言">
            </div>
        </div>
    </div>
    <!--END-->

    <!--支付方式START-->
    <div class="order-checked-info" style="width: 100%;background-color: white;padding: 5px 20px 5px 20px;overflow: hidden;margin-top:10px;">
        <div class="mui-row"  style="border-top:1px solid   #F8F8FF;padding: 10px 5px 10px 5px">
            <div><span>支付方式</span></div>
            <div  class="paying">
                <div class="mui-input-row mui-checkbox">
                    <div class="cart-img" style="   float:left;
    height: 50px;
    width: 50px;
    background-color: white;">
                        <img style="width: 100%;height: 100%" src="../../images/支付宝.png">
                    </div>
                    <div style="float:left;margin-left: 20px;margin-top:20px"><span >支付宝支付</span></div>
                    <input  type="checkbox" checked>
                </div>
            </div>
            <div  class="paying">
                <div class="mui-input-row mui-checkbox">
                    <div class="cart-img" style="   float:left;
    height: 50px;
    width: 50px;
    background-color: white;">
                        <img style="width: 100%;height: 100%" src="../../images/微信.png">
                    </div>
                    <div style="float:left;margin-left: 20px;margin-top:20px"><span >微信支付</span></div>
                    <input  type="checkbox" >
                </div>
            </div>
        </div>
    </div>
    <!--支付方式END-->

    <!-- 底部START -->
    <footer class="mui-row" style="max-width: 414px;margin: auto;	position:fixed;
    bottom:0;
    height: 50px;
    width: 100%;
    background-color: black;">
        <div class="mui-col-xs-8" style="background-color: rgb(255,240,244);">
            <span style="line-height: 50px;margin-left: 20px;color:rgb(245,0,89); ">
                实付款：<span style="font-size: 16px;color: rgb(245,0,89)">¥1.00&nbsp</span>
            </span>
        </div>
        <div class="mui-col-xs-4"  style="text-align: center;background-color: rgb(245,0,89);">
            <a onclick="javascript:goUrl('address.html')"  style="line-height: 50px;color:white;">立即支付</a>
        </div>
    </footer>
    <div style="height: 50px;"></div>
    <!-- 底部END  -->

</div>



<script src="../../js/mui.js"></script>
<script src="../../js/myjs/checkOrder.js"></script>
<script src="../../js/myjs/url.js"></script>
</body>

</html>